<template>
  <mt-navbar title="选择线索类型" border>
    <template #right>
      <uv-icon name="search" color="#1C213E" size="48rpx" @click="goSearchProduct"></uv-icon>
    </template>
  </mt-navbar>
  <view class="safety-150 bg-#ffffff min-h-100vh box-border">
    <view class="left-box">
      <view class="w-204rpx h-full bg-#f7f7f7">
        <scroll-view class="h-full" scroll-y :show-scrollbar="false">
          <view :style="{ height: commonStore.systemInfo.statusBarHeight + 'px' }"></view>
          <view
            v-for="item in firstArr"
            :key="item.id"
            class="left-item"
            :class="{ active: currentFirst === item.id }"
            @click="handleChangeFirst(item)"
            >{{ item.productCategoryName }}</view
          >
        </scroll-view>
      </view>
    </view>

    <view class="right-box">
      <uv-list>
        <uv-radio-group v-model="productId" placement="column">
          <uv-list-item v-for="item in dataList" :key="item.id">
            <view class="px-24rpx py-32rpx">
              <uv-radio :label="item.productName" :name="item.id"> </uv-radio>
            </view>
          </uv-list-item>
        </uv-radio-group>
      </uv-list>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="w-full" :shake="false" @click="handleSubmit">确认</mt-button>
    </view>
  </view>
</template>

<script setup>
import { productCategorygetProductCategoryStatisticsListApp, productgetProductPageAppV2 } from '@/api/mixed';
import useCommonStore from '@/store/common';

const commonStore = useCommonStore();

function goSearchProduct() {
  uni.navigateTo({
    url: '/subClue/pages/searchProduct2'
  });
}

function handleChangeFirst(item) {
  dataList.value = [];
  currentFirst.value = item.id;
  const obj = firstArr.value.find((son) => son.id === item.id);
  twoArr.value = obj.children;
  currentTwo.value = obj.children[0].id;
  getData();
}
function handleChangeTwo(item) {
  dataList.value = [];
  currentTwo.value = item.id;
  getData();
}

const firstArr = ref([]);
const currentFirst = ref('');
const twoArr = ref([]);
const currentTwo = ref();
const productId = ref('');
async function getFirstData(init, storage) {
  const res = await productCategorygetProductCategoryStatisticsListApp();
  firstArr.value = res.data;
  if (init) {
    currentFirst.value = res.data[0].id;
    twoArr.value = res.data[0].children;
    currentTwo.value = res.data[0].children[0].id;
  } else {
    currentFirst.value = storage.productCategoryId[0];
    const ar = res.data.find((son) => son.id === storage.productCategoryId[0]);
    twoArr.value = ar.children;
    currentTwo.value = storage.productCategoryId[1];
    productId.value = storage.productId;
  }

  getData();
}

const dataList = ref([]);
async function getData() {
  const res = await productgetProductPageAppV2({ pageNum: 1, pageSize: 200, lastId: '', productCategoryId: currentTwo.value });
  dataList.value = res.data?.items || [];
}

function handleSubmit() {
  const obj = dataList.value.find((item) => item.id === productId.value);

  uni.setStorageSync('searchProduct', {
    productCategoryId: [obj.productCategoryParentId, obj.productCategoryId],
    productCategoryName: [obj.productCategoryParentName, obj.productCategoryName],
    productId: obj.id,
    productName: obj.productName
  });
  uni.navigateBack();
}

onLoad(() => {
  const p_storage = uni.getStorageSync('searchProduct');
  if (p_storage && p_storage.productId) {
    // modelForm.value.productCategoryId = p_storage.productCategoryId;
    // modelForm.value.productCategoryName = p_storage.productCategoryName;
    // modelForm.value.productId = p_storage.productId;
    // modelForm.value.productName = p_storage.productName;
    getFirstData(false, p_storage);
  } else {
    getFirstData(true);
  }
});
</script>

<style lang="scss" scoped>
.left-box {
  position: fixed;
  left: 0;
  top: 44px;
  bottom: 120rpx;
  width: 206rpx;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 2;
  border-right: 2rpx solid #e6e6e6;
  box-sizing: border-box;
  .left-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100rpx;
    font-size: 28rpx;
    color: #1c213e;
    padding: 20rpx 32rpx;
    word-break: break-all;
    box-sizing: border-box;
    &.active {
      background-color: #ffffff;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4rpx;
        height: 28rpx;
        background-color: #1484ee;
      }
    }
  }
}
.right-box {
  margin-left: 206rpx;
}
</style>
